<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    // 定义一个Component类
    class Component {}

    // 定义一个App class
    class App extends Component {
        state = {
            name: 'App'
        }
        // render 方法 返回一段DOM结构
        render() {
            return `<div><h1>${this.state.name}</h1></div>`;
        }
    }


    class ReactDOM extends Component {
        render(App, el) {
            el.innerHTML = App;
        }
    }
    // 新建一个App对象
    let app = new App();
    console.log(app.render());

    // 新建一个ReactDom组件
    let reactDom = new ReactDOM();
    reactDom.render(app.render(), document.getElementById("root"));
</script>

</html>